/* Inspired by the work from Nick Argyle (https://codier.io/creation/rJic9VBS7) */

:root {
    --size: 5rem;
    --color: #2ebadb;
    --hue: -15deg;
}

.drone-name {
    font-size: 1.125rem;
    filter: drop-shadow(0 0 0.25rem white);
}

.drone {
    position: relative;
    width: var(--size);
    height: var(--size);
    animation: all 2.5s infinite ease-in-out;
    transition: all .1s;
    filter: grayscale(100%);
    left: calc(50% - var(--size) / 2);
}

.highlight {
    filter: drop-shadow(0 0 0.5rem var(--color)) grayscale(0%) invert(0) sepia(1) saturate(5) hue-rotate(var(--hue));
}

.lowlight {
    opacity: 50%;
}

.droneBody {
    width: calc(var(--size) * 1.125);
    height: var(--size);
    animation: drone 3s infinite ease-in-out;
    overflow: hidden;
}

.overlay {
    width: calc(var(--size) / 3);
    height: calc(var(--size) / 3 * 2);
    z-index: 1;
    position: absolute;
    top: calc(var(--size) * 0.05);
    left: calc(var(--size) * 0.4);

    /* Rectangle 3: */
    background-image: linear-gradient(-237deg, rgba(238, 238, 238, .8) 20%, rgba(216, 216, 216, 0.00) 79%);
    opacity: .6;
    animation: overlay 2.5s infinite ease-in-out;
}

.prop {
    width: calc(var(--size) * 0.2);
    height: calc(var(--size) * 0.375);

    transform-origin: 47.2% 50.1%;
}

.prop1 {
    position: absolute;
    left: calc(var(--size) * 0.053);
    top: calc(var(--size) * -0.086);
    animation: prop .5s infinite linear;
}

.prop2 {
    position: absolute;
    right: calc(var(--size) * -0.083);
    top: calc(var(--size) * -0.09);
    animation: ccw .5s infinite linear;
}

.prop3 {
    position: absolute;
    right: calc(var(--size) * -0.086);
    bottom: calc(var(--size) * 0.04);
    animation: prop .5s infinite linear;
}

.prop4 {
    position: absolute;
    left: calc(var(--size) * 0.053);
    bottom: calc(var(--size) * 0.03);
    animation: ccw .5s infinite linear;

}

@keyframes prop {
    100% {
        transform: rotate(920deg);
    }
}

@keyframes ccw {
    100% {
        transform: rotate(-920deg);
    }
}

@keyframes drone {
    0% {
        filter: drop-shadow(0 10px 0px rgba(0, 0, 0, .2));
    }
    50% {
        filter: drop-shadow(0 25px 3px rgba(0, 0, 0, .1));
    }
    100% {
        filter: drop-shadow(0 10px 0px rgba(0, 0, 0, .2));
    }
}

@keyframes all {
    50% {
        transform: scale(1.08) rotateZ(10deg) rotateY(10deg);
    }
}

@keyframes overlay {
    50% {
        transform: scale(1);
        opacity: .2;
    }
}
